<template>
    <div class="dataView">
        <div class="header">
            <!-- <div class="toLogin" @click="toLogin" title="退出登录">
                <el-icon color="#666" style="font-size: 24px;">
                    <User />
                </el-icon>
            </div> -->
            <div class="companyName">经开区水质净化工程有限公司</div>
            <div class="userInfo">
                <div
                    class=""
                    @click="toMain"
                >
                    <div style="
                            line-height: 50px;
                            width: auto;
                            white-space: nowrap;
                            margin-right: 10px;
                            font-size: 14px;
                            color: #fff;
                        ">
                        你好, {{ realName }}
                    </div>
                </div>
                <div
                    class="toHome"
                    @click="toMain"
                >
                    <el-tooltip
                        class="box-item"
                        content="首页"
                        effect="light"
                        placement="bottom"
                    >
                        <el-icon
                            color="#fff"
                            style="font-size: 24px"
                        >
                            <House />
                        </el-icon>
                    </el-tooltip>
                </div>
                <div
                    class="toHome"
                    @click="toLogin"
                >
                    <el-tooltip
                        class="box-item"
                        content="退出"
                        effect="light"
                        placement="bottom"
                    >
                        <el-icon
                            color="#fff"
                            style="font-size: 24px"
                        >
                            <SwitchButton />
                        </el-icon>
                    </el-tooltip>
                </div>
            </div>
        </div>
        <div
            class="dataContain"
            :style="{ height: hHeight - 50 + 'px' }"
        >
            <div class="menuList">
                <el-scrollbar style="background: #fff">
                    <el-menu
                        :default-active="defaultActive"
                        class="el-menu-vertical-demo"
                        style="border-right: none"
                    >
                        <div
                            v-for="(item, index) in menuList"
                            :key="item.id"
                            v-show="item.hasAuth && menuListAuthShow(item.id)"
                        >
                            <el-sub-menu
                                :index="`${index}`"
                                v-if="item.children && item.children.length > 0"
                                v-show="menuListAuthShow(item.id)"
                            >
                                <template #title>
                                    <el-icon
                                        class="elIcon"
                                        :size="20"
                                    >
                                        <Platform v-if="item.icon == 'Platform'" />
                                        <Guide v-if="item.icon == 'Guide'" />
                                        <MagicStick v-if="item.icon == 'MagicStick'" />
                                        <EditPen v-if="item.icon == 'EditPen'" />
                                        <Tools v-if="item.icon == 'Tools'" />
                                        <Menu v-if="item.icon == 'Menu'" />
                                        <Operation v-if="item.icon == 'Operation'" />
                                        <User v-if="item.icon == 'User'" />
                                    </el-icon>
                                    <span>{{ item.name }}</span>

                                </template>
                                <el-menu-item
                                    :index="`${index}-${n}`"
                                    v-for="(m, n) in item.children"
                                    :key="m.id"
                                    @click="toPath(m)"
                                    v-show="menuListAuthShow(m.id)"
                                >{{ m.name }}
                                    <span
                                        class="count"
                                        v-if="
                                        m.routeName == 'equipmentMonitoring' &&
                                        queryUnAuditCount > 0 &&
                                        isAdmin
                                    "
                                    >3</span></el-menu-item>
                            </el-sub-menu>
                            <el-menu-item
                                :index="index + ''"
                                v-else
                                @click="toPath(item)"
                                v-show="menuListAuthShow(item.id)"
                            >
                                <el-icon
                                    class="elIcon"
                                    :size="20"
                                >
                                    <Platform v-if="item.icon == 'Platform'" />
                                    <Guide v-if="item.icon == 'Guide'" />
                                    <MagicStick v-if="item.icon == 'MagicStick'" />
                                    <EditPen v-if="item.icon == 'EditPen'" />
                                    <Tools v-if="item.icon == 'Tools'" />
                                    <Menu v-if="item.icon == 'Menu'" />
                                    <Operation v-if="item.icon == 'Operation'" />
                                    <User v-if="item.icon == 'User'" />
                                </el-icon>
                                <span>{{ item.name }}</span>

                                <span
                                    class="count"
                                    v-if="
                                        item.routeName == 'examine' &&
                                        queryUnAuditCount > 0 &&
                                        isAdmin
                                    "
                                >{{ queryUnAuditCount }}</span>
                            </el-menu-item>
                        </div>
                        <el-menu-item @click="toWurenji">
                            <el-icon
                                class="elIcon"
                                :size="20"
                            >
                                <Promotion />
                            </el-icon>
                            <span>无人机</span>
                        </el-menu-item>
                    </el-menu>
                </el-scrollbar>
            </div>
            <el-scrollbar class="containRouter">
                <div class="containRouterBox">
                    <router-view :key="route.path"></router-view>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
import loginHttp from "@/https/login.js";
import menuHttp from "@/https/menu.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import {
    EditPen,
    Guide,
    House,
    MagicStick,
    Menu,
    Operation,
    Platform,
    Promotion,
    SwitchButton,
    Tools,
    User
} from "@element-plus/icons-vue";
import { nextTick, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import dataList from "../../https/dataList";
const hHeight = ref(0);
const localTypeUnit = ref(Storage.localGet("depId"));
const realName = ref(Storage.localGet("realName"));
const queryUnAuditCount = ref(0);
const router = useRouter();
const route = useRoute();
const menuList = ref(JSON.parse(Storage.localGet("menuList"))[1].children);
const roleKeyList = ref();
const defaultActive = ref("0");
const roleIds = ref(Storage.localGet("roleIds"));
const isAdmin = ref(false);
isAdmin.value = roleIds.value.includes(1);
console.log(menuList.value, "11111111");
const getdefaultActive = () => {
    if (route.path) {
        menuList.value.forEach((item, index) => {
            if (item.children && item.children.length > 0) {
                item.children.forEach((m, n) => {
                    if (m.path == route.path) {
                        defaultActive.value = index + "-" + n;
                    }
                });
            } else {
                if (item.path == route.path) {
                    defaultActive.value = index + "";
                }
            }
        });
    } else {
        defaultActive.value = "0";
    }
    console.log(defaultActive.value, "defaultActive.value");
};

const menuRoleKey = async () => {
    const res = await menuHttp.menuRoleKey({
        roleIdList: roleIds.value.split(','),
    });
    if (res.data.code === 200) {
        Storage.localSet("roleKeyList", res.data.data);
        roleKeyList.value = res.data.data.join(',')
    }
};

const menuListAuthShow = (id) => {
    let authShow = false
    let list = roleKeyList.value ? roleKeyList.value.split(',') : []
    if (list.includes(id.toString())) {
        authShow = true
    }
    return authShow
}
getdefaultActive();
const toMain = () => {
    router.push({ path: "/main" });
};
const toLogin = async () => {
    const res = await loginHttp.logout();
    if (res) {
        router.replace({ path: "/login" });
    }
};
const toPath = (item) => {
    router.push({ path: item.path });
};
const queryUnAudit = () => {
    dataList.queryUnAudit().then((res) => {
        queryUnAuditCount.value = res.data.data;
    });
};
const toWurenji = () => {
    window.open("http://117.72.125.246:28081/#/project", "_blank");
};
onMounted(() => {
    nextTick(() => {
        hHeight.value = document.documentElement.clientHeight;
    });
    queryUnAudit();
    menuRoleKey();
});
</script>
<style scoped lang="less">
.dataView {
    width: 100%;
    height: 100%;
    background: #f5f6fa;
}

.header {
    background: #409eff;
    height: 50px;
    width: 100%;
    // background: #fff;
    border-bottom: 1px solid #ccc;
    // margin-bottom: 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .toHome {
        box-sizing: border-box;
        width: 40px;
        height: 50px;
        // background: #63b2ee;
        text-align: center;
        z-index: 100;
        cursor: pointer;
        padding-top: 12px;
    }
    .companyName {
        color: #fff;
        font-size: 16px;
        line-height: 50px;
        padding-left: 30px;
    }
    .userInfo {
        display: flex;
        flex-direction: row;
        padding-right: 20px;
    }
    .toLogin {
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        // background: #63b2ee;
        text-align: center;
        z-index: 100;
        cursor: pointer;
        padding-top: 12px;
    }
}

.dataContain {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: #f6f8f9;
    .menuList {
        width: 188px;
        height: 100%;
        ul {
            height: 100%;
        }
    }
    .leftNave {
        width: 220px;
        background: #eaedf1;

        ul {
            width: 100%;

            li {
                width: 100%;
                height: 48px;
                line-height: 48px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-items: flex-start;
                color: #333;
                font-size: 14px;
                cursor: pointer;

                .elIcon {
                    width: 40px;
                    padding-left: 10px;
                }

                &.act {
                    background: #fff;
                }
            }
        }
    }

    .containRouter {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        .containRouterBox {
            width: 100%;
            min-height: 100%;
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
        }
    }
}
:deep .el-scrollbar__view {
    height: 100% !important;
}
.count {
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    font-size: 10px;
    margin-left: 10px;
}
:deep .el-menu-item.is-active {
    background: #ecf5ff;
    border-left: 4px solid #409eff;
}
</style>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
</style>
